<!-- 头部导航条 -->
<script lang="ts" setup>
import header from '@/assets/headers.jpg?url'
import router from '@/router'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

// 简单的退出逻辑 => 优化：导航守卫
const quitLogin = () => {
  // token和username清零
  userStore.clearToken()
  userStore.clearUsername()
  // 退出到登录页
  router.push('/login')
}
</script>
<template>
  <!-- 头部导航条：导航工具条 -->
  <nav class="navbar navbar-expand-lg navbar-light text-muted border-bottom">
    <div class="container-fluid">
      <!-- 左边 -->
      <i class="fas fa-bars"></i>
      欢迎 {{ userStore.username ? userStore.username : '主人' }} 回家
      <!-- 右边 -->
      <ul class="navbar-nav d-flex justify-content-between align-items-center">
        <li class="nav-item me-3">
          <i class="fas fa-comments"></i>
        </li>
        <li class="nav-item me-3">
          <i class="fas fa-cog"></i>
        </li>
        <li class="nav-item me-3">
          <i class="fas fa-envelope-open"></i>
        </li>
        <!-- 头像 -->
        <li class="nav-item ms-4">
          <div class="dropdown">
            <a
              href="#"
              class="dropdown-toggle"
              id="dropdownMenuButton1"
              data-bs-toggle="dropdown"
              aria-expanded="false"
              data-bs-offset="10,20"
              style="height: 60px"
            >
              <img alt="" class="avatar-circle" :src="header" width="38" height="38" />
            </a>
            <ul
              class="dropdown-menu dropdown-menu-lg-end my-0 py-0"
              style="background: #ffffff"
              aria-labelledby="dropdownMenuButton1"
            >
              <li class="dropdown-item px-3 py-2 text-senconday bg-light">账号</li>
              <li class="dropdown-item px-4 py-2">
                <i class="fas fa-comments me-3"></i>
                更新消息
              </li>
              <li class="dropdown-item px-4 py-2">
                <i class="fas fa-envelope me-3"></i>
                评论信息
              </li>
              <!-- 设置 -->
              <li class="dropdown-item px-3 py-2 text-senconday bg-light">设置</li>
              <li class="dropdown-item px-4 py-2">
                <i class="fas fa-user me-3"></i>
                个人信息
              </li>
              <li class="dropdown-item px-4 py-2">
                <i class="fas fa-credit-card me-3"></i>
                支付设置
              </li>
              <li class="dropdown-item px-4">
                <i class="fas fa-cogs me-3"></i>
                系统设置
              </li>
              <li><hr class="dropdown-divider px-4 py-2" /></li>
              <li class="dropdown-item px-4 py-2 mb-2" @click="quitLogin()">
                <i class="fas fa-sign-out-alt me-3"></i>
                退出
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</template>
<style scoped></style>
